import CustomInput from '@/components/antd-comp/input/CustomInput'
import CustomSelect from '@/components/antd-comp/select/CustomSelect'
// import { Button } from 'antd'
import { useEffect, useState } from 'react'

const selectOptions = [
  { value: 'string', label: 'String' },
  { value: 'integer', label: 'Integer' },
  { value: 'boolean', label: 'Boolean' },
  { value: 'number', label: 'Number' }
]

/* 模型-输出 */
export default function ExportationCont({ info, editData }) {
  const [optionList, setOptionList] = useState([])

  useEffect(() => {
    setOptionList(info.outputList)
  }, [info])

  return (
    <div className="flexCol InputCont_case">
      <div className="flexRowStart columns-title--dGaYetSzjjUdXN_u9_8J">
        <div className="input-head" style={{ width: '140px' }}>
          变量名称
        </div>

        <div className="input-head w-[calc((100%-140px)*0.4)]">变量类型</div>
        <div className="input-head w-[calc((100%-140px)*0.6)]">参数描述</div>
      </div>
      {/* options */}
      {optionList?.map((item, i) => (
        <div key={i} className="flexRowStart InputCont_marTop">
          {/* 变量名称 */}
          <div style={{ width: '140px' }}>
            <CustomInput disabled placeholder="输入变量名称" value={item.variable} />
          </div>
          <div className="inputCont_end" style={{ width: 'calc(100% - 140px)' }}>
            {/* 变量类型 */}
            <CustomSelect
              style={{ width: '40%' }}
              disabled
              value={item.type}
              options={selectOptions}
              placeholder="变量类型"
            />
            {/* 参数描述 */}
            <CustomInput
              disabled
              placeholder="输入参数描述"
              value={item.value}
              maxLength={8}
              style={{ width: '60%' }}
            />
          </div>
        </div>
      ))}
    </div>
  )
}
